<template>
	<div>
		<header id="header" class="mui-bar mui-bar-nav">
		<h1 class="mui-title"><input type="text" placeholder="你想住哪儿?"/><i class="mui-icon mui-icon-search"></i></h1>
		<select name="" class="select0">
		</select>
		<a href="#" class="mui-btn-nav  mui-pull-right" style="margin-top: 18px;">附近</a>
	</header>
	<div id="slider" class="mui-slider" >
			<div class="mui-slider-group mui-slider-loop">
				<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
				<div class="mui-slider-item mui-slider-item-duplicate">
					<a href="#">
						<img src="static/images/banner.png">
					</a>
				</div>
				<!-- 第一张 -->
				<div class="mui-slider-item">
					<a href="#">
						<img src="static/images/banner.png">
					</a>
				</div>
				<!-- 第二张 -->
				<div class="mui-slider-item">
					<a href="#">
						<img src="static/images/banner.png">
					</a>
				</div>
				<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
				<div class="mui-slider-item mui-slider-item-duplicate">
					<a href="#">
						<img src="static/images/banner.png">
					</a>
				</div>
			</div>
			<div class="mui-slider-indicator">
				<div class="mui-indicator mui-active"></div>
				<div class="mui-indicator"></div>
			</div>
		</div>
	<div class="mui-content">
        <ul class="mui-table-view mui-grid-view mui-grid-9">
            <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3"><router-link to="/newHouseRanking">
                <img src="../assets/images/icon1.png" alt="" />
                <div class="mui-media-body">新房排行</div></router-link></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3"><router-link to="/oldHouseRanking">
                <img src="../assets/images/icon2.png" alt="" />
                <div class="mui-media-body">二手房排行</div></router-link></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3"><router-link to="/allHouseRanking">
                <img src="../assets/images/icon3.png" alt="" />
                <div class="mui-media-body">组合排行</div></router-link></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3"><router-link to="/valuation">
                <img src="../assets/images/icon4.png" alt="" />
                <div class="mui-media-body">房产估值</div></router-link></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3"><router-link to="/#">
                <img src="../assets/images/icon5.png" alt="" />
                <div class="mui-media-body">问答</div></router-link></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3"><router-link to="/quality">
                <img src="../assets/images/icon6.png" alt="" />
                <div class="mui-media-body">性价比</div></router-link></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3"><router-link to="/calculator">
               <img src="../assets/images/icon7.png" alt="" />
                <div class="mui-media-body">房产计算</div></router-link></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3"><router-link to="/">
               <img src="../assets/images/icon8.png" alt="" />
                <div class="mui-media-body">地图模式</div></router-link></li>
        </ul> 
	</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				msg: 'Welcome to Your Vue.js App'
			}
		},
		mounted: function() {
			let ajaxURL=localStorage.getItem("ajaxURL");
			let city0=localStorage.getItem("cityName");
			$('.select0').append(`<option>${city0}</opntion>`)
			
	        $.ajax({
                type:"get",
                dataType:"jsonp",
                url:`${ajaxURL}/houseweb/front/index.do`,
				cache:false,
                success:function(data){
                	console.log(data.data)
                	for(var i=0;i<data.data.length;i++){
                		if(city0!=data.data[i].cityName){
                			$('.select0').append(`<option>${data.data[i].cityName}</opntion>`);                			
                		}
                	}
                }
            })
		},
		methods:{
			
		}
	}
</script>
<style scoped>
	.mui-bar {
		height: 60px;
		background-color: #0186C2;
	}
	.mui-bar a {
				display: inline-block;
				padding: 0 10px;
				color: #fff;
			}
			.mui-bar .mui-title {
				left: 20%;
				width: 66%;
				padding-top: 6px;
			}
			.mui-bar .mui-title input {
				height: 30px;
				font-size: 12px;
			}
			.mui-bar .mui-title i {
				position: absolute;
				right: 6px;
				top: 18px;
				font-size: 20px;
			}
			.mui-slider {
				margin-top: 60px;
			}
			.mui-bar-nav ~ .mui-content {
				padding: 0;
			}
			.mui-content > .mui-table-view:first-child {
				margin: 0;
			}
			.mui-content li img {
				width: 50px;
			}
			.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body {
				font-size: 12px;
			}
			.mui-grid-view.mui-grid-9 .mui-table-view-cell > a:not(.mui-btn) {
				padding: 0;
			}
			.mui-grid-view.mui-grid-9 {
				background-color: #fff;
				border:0;
			}
			.mui-grid-view.mui-grid-9 .mui-table-view-cell {
				border: 0;
			}
			.nav-bar {
				height: 50px;
				background-color: #f2f3fa;
			}
			
			.nav-bar .mui-tab-item1 {
				display: table-cell;
				overflow: hidden;
				width: 1%;
				height: 50px;
				text-align: center;
				vertical-align: middle;
				color: #929292;
			}
			.mui-bar-tab .mui-tab-item1 .mui-icon {
			    top: 3px;
			    width: 24px;
			    height: 24px;
			    padding-top: 0;
			    padding-bottom: 0;
			}
			.mui-bar-tab .mui-tab-item1 .mui-icon ~ .mui-tab-label {
			    font-size: 11px;
			    display: block;
			    overflow: hidden;
			}
			select {
				width: auto;
				border: 0;
				background-color: #0186c2;
				color: #fff;
				line-height: 20px;
				margin-top: 10px;
				font-size: 14px;
			}
			select option {
				padding: 0;
				margin: 0;
				}
</style>